<template>
  <ul class="ul-wrapper">
    <!-- 包裹层-->
    <li v-for="(item, index) in list" :key="item.id">
      <!-- 遍历-->
      <div class="outsize">
        <i
            :class="item.icon"
            v-show="item.children && item.classify == 0"
            @click="changeShow(index)"
          ></i>
          <i v-show="!item.children && item.classify == 0"></i>
      <div class="one-list" :class="[item.classify == 1 ? 'user' : '']">
        <div class="list" v-show="item.classify == 1"></div>
          <i class="fa fa-user-o" v-show="item.classify == 1"></i>
          <div class="checkbox-title">
            <span v-if="item.classify == 0" @click="getGId(item.id)">{{item.label}}<span class="roleKey" v-if="item.roleKey">({{item.roleKey}})</span></span>

            <span v-if="item.classify == 1" @click="getUId(item.id)">{{
              item.label
            }}</span>
            <div class="btn">
              <button
                v-if="item.classify == 0 && item.children"
                class="leftBox-btn"
                @click="getSort(item.id)"
              >
                排序
              </button>
              <button
                v-if="item.classify == 0"
                class="leftBox-btn"
                @click="addG(item.id)"
              >
                添加
              </button>
              <button
                v-if="item.classify == 0 && !item.children"
                class="leftBox-btn"
                @click="deleteG(item.id)"
              >
                删除
              </button>
              <button
                v-if="item.classify == 1"
                class="leftBox-btn"
                @click="deleteU(item.id)"
              >
                删除
              </button>
            </div>
          </div>
        </div>
        </div>
      </div>
      <tree v-show="item.expand" :list="item.children"></tree>
    </li>
  </ul>
</template>
<script>
import { bus } from "../../../bus";
export default {
  name: "tree",
  props: {
    list: {
      // 所有树节点
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      userInfo: [],
      clickIndex: '',
      num:''
    };
  },
  computed: {},
  created() {},
  methods: {
    //修改点击下拉的图标
    changeShow(index) {
      // console.log(index);
      let temp = this.list[index];
      temp.expand = !temp.expand;
      if (temp.expand == true) {
        temp.icon = "fa fa-angle-down";
      } else {
        temp.icon = "fa fa-angle-right";
      }
    },
    //根据id获取部门信息
    getGId(id) {
      bus.$emit("getG", id);
      // this.isClick = true;
    },
    //根据id获取用户信息
    getUId(id) {
      bus.$emit("getU",id);
      // this.isClick = true;
      // console.log(235666223);
    },
    //根据id获取排序
    getSort(id) {
      bus.$emit("getS", id);
    },
    //根据id删除部门
    deleteG(id) {
      bus.$emit("deleteG", id);
    },
    //根据id删除用户
    deleteU(id) {
      bus.$emit("deleteU", id);
    },
    //根据id添加子部门
    addG(id) {
      bus.$emit("addG", id);
    }
  }
};
</script>

 <style lang="less" scoped>
.ul-wrapper {
  margin: 10px 0px 0px 20px;
  position: relative;
  overflow: auto;
  .user {
    margin-left: 10px;
  }
  .outsize {
    width: 100%;
    display: flex;
    height: 1.875rem;
    align-items: center;
    margin-bottom: 0.3125rem;
    i {
      height: 1.875rem;
      width: 1.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .one-list {
    display: flex;
    margin: 10px 0;
    width: 100%;
    height: 1.875rem;
    align-items: center;
    .list {
      background-color: #4baa4e;
      height: 100%;
      width: 2px;
      display: none;
    }
  }

  .checkbox-title {
    display: flex;
    width: 55%;
    height: 100%;
    align-items: center;
    span {
      display: inline-block;
      width: 10rem;
      height: 100%;
      line-height: 1.875rem;
      position: relative;
      cursor:pointer;
      .roleKey{
        position: absolute;
        margin-left: 0.3125rem;
      }
    }
    .btn {
      position: absolute;
      right: 1rem;
      display: none;
      .leftBox-btn {
        width: 3.3rem !important;
        background-color: #4baa4e;
        height: 1.5rem !important;
        border-radius: 5px !important;
        color: #fff;
        margin-left: 8px;
      }
    }
  }
  .one-list:hover {
    background-color: rgba(106, 110, 114, 0.3);
    .fa-user-o {
      color: #4baa4e;
    }
    .checkbox-title {
      color: #4baa4e;
    }
    .btn {
      display: block;
    }
  }
}
</style>